9. Пример - Сохранение и Загрузка данных

Цель: создать страницу с таблицей, которая заполняется из localStorage и позволяет:

Добавлять новые записи (через форму с двумя полями ввода).
Сохранять данные в localStorage, чтобы они не терялись после перезагрузки страницы.
Очищать всю таблицу и localStorage.
Удалять отдельные записи из таблицы и localStorage.

1. Шаг 1: Основная структура HTML

Что нужно сделать:

Создайте файл с именем index.html.
Вставьте следующий код:

Код:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Таблица с LocalStorage</title>
    <link rel="stylesheet" href="styles.css"> <!-- Подключаем стили -->
</head>
<body>

    <h1>Таблица с LocalStorage</h1>

    <!-- Форма для добавления новой записи -->
    <form id="data-form">
        <input type="text" id="name" placeholder="Имя" required>
        <input type="number" id="age" placeholder="Возраст" required>
        <button type="submit">Добавить запись</button>
    </form>

    <!-- Кнопка для очистки таблицы -->
    <button id="clear-button">Очистить все записи</button>

    <!-- Таблица для отображения данных -->
    <table id="data-table">
        <thead>
            <tr>
                <th>Имя</th>
                <th>Возраст</th>
                <th>Действия</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>

    <script src="script.js"></script> <!-- Подключаем скрипт -->
</body>
</html>

Объяснение кода HTML

<form> — форма для ввода имени и возраста.
<input> — два поля для ввода имени и возраста.
<button> — кнопка для добавления записи.
Таблица — отображает записи из localStorage. Содержит заголовки "Имя", "Возраст" и "Действия".
Кнопка "Очистить все" — удаляет все записи из таблицы и localStorage.

2. Шаг 2: Стилизация страницы CSS

Что нужно сделать:

Создайте файл с именем styles.css.
Вставьте следующий код:

Код:

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f9;
    color: #333;
    text-align: center;
    padding: 20px;
}

h1 {
    margin-bottom: 20px;
}

form {
    margin-bottom: 20px;
}

input[type="text"], input[type="number"] {
    padding: 10px;
    margin-right: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

button {
    padding: 10px 20px;
    background-color: #009879;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #007960;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

th, td {
    padding: 12px;
    border: 1px solid #ddd;
    text-align: center;
}

tr:nth-child(even) {
    background-color: #f3f3f3;
}

Объяснение кода CSS

Стилизация полей ввода и кнопок для улучшения внешнего вида.
Стили для таблицы: границы, отступы и цвет фона.

3. Шаг 3: Добавляем логику с JavaScript

Что нужно сделать:

Создайте файл с именем script.js.
Вставьте следующий код:

Шаг 3.1: Получаем доступ к элементам HTML

const form = document.getElementById('data-form');
const nameInput = document.getElementById('name');
const ageInput = document.getElementById('age');
const tableBody = document.querySelector('#data-table tbody');
const clearButton = document.getElementById('clear-button');

Объяснение

Используем document.getElementById() и querySelector() для доступа к форме, полям ввода и кнопкам.

Шаг 3.2: Загрузка данных из localStorage

document.addEventListener('DOMContentLoaded', loadData);

function loadData() {
    let data = JSON.parse(localStorage.getItem('tableData')) || [];
    data.forEach(item => addRowToTable(item.name, item.age));
}

Объяснение

При загрузке страницы вызывается loadData(), которая загружает данные из localStorage и отображает их в таблице.

Шаг 3.3: Добавление новой записи

form.addEventListener('submit', function(event) {
    event.preventDefault();
    const name = nameInput.value;
    const age = ageInput.value;

    if (name && age) {
        addRowToTable(name, age);
        saveData(name, age);
        form.reset();
    }
});

Объяснение

Обрабатываем событие отправки формы и вызываем addRowToTable() и saveData().
Сбрасываем значения полей ввода с помощью form.reset().

Шаг 3.4: Добавление строки в таблицу

function addRowToTable(name, age) {
    const row = document.createElement('tr');
    row.innerHTML = `
        <td>${name}</td>
        <td>${age}</td>
        <td><button class="delete">Удалить</button></td>
    `;
    tableBody.appendChild(row);

    row.querySelector('.delete').addEventListener('click', function() {
        row.remove();
        deleteData(name, age);
    });
}

Объяснение

Создаём новую строку с именем и возрастом.
Кнопка "Удалить" для удаления конкретной записи.

Шаг 3.5: Сохранение данных в localStorage

function saveData(name, age) {
    let data = JSON.parse(localStorage.getItem('tableData')) || [];
    data.push({ name, age });
    localStorage.setItem('tableData', JSON.stringify(data));
}

Объяснение

Считываем текущие данные из localStorage.
Добавляем новую запись и сохраняем данные обратно в localStorage.

Шаг 3.6: Удаление данных из localStorage

function deleteData(name, age) {
    let data = JSON.parse(localStorage.getItem('tableData')) || [];
    data = data.filter(item => item.name !== name || item.age !== age);
    localStorage.setItem('tableData', JSON.stringify(data));
}

Объяснение

Используем метод filter(), чтобы удалить запись из массива.
Сохраняем обновлённые данные обратно в localStorage.

Шаг 3.7: Очистка таблицы

clearButton.addEventListener('click', function() {
    localStorage.clear();
    tableBody.innerHTML = '';
});

Объяснение

Очищаем localStorage и удаляем все строки из таблицы.

Теперь у вас есть функциональная таблица с возможностью:

Добавлять записи.
Сохранять данные после перезагрузки страницы.
Удалять отдельные записи.
Полностью очищать таблицу.